import React from 'react';
import {Modal} from 'antd';


const checkbox=[];
class AddUser extends React.Component{
    constructor(props){
        super(props);
        this.state={
            username:'',
            password:'',
            usertype:'',
            industry:[],
            message:''
        };

        // this.handleChange = this.handleChange.bind(this);
    };
    query = {
        username:{
            value:'',
            validata:[
                {
                    errMessage:'用户名必须填写',
                    test:(value) => {
                        return value;
                    }
                }
            ]
        },
        password:{
            value:'',
            validata:[
                {
                    errMessage:'密码必须填写',
                    test:(value) => {
                        return value;
                    }
                },
                {
                    errMessage:'密码长度最小为6',
                    test:(value) => {
                        return value.length >= 6;
                    }
                }
            ]
        },
        usertype:{
            value:'',
            validata:[
                {
                    errMessage:'用户类型必须选择一项',
                    test:(value) => {
                        return value;
                    }
                }
            ]
        },
        industry:{
            value:'',
            validata:[
                {
                    errMessage:'经营范围必须选择',
                    test:(value) => {
                        return  value;
                    }
                }
            ]
        },
        message:{
            value:'',
            validata:[
                {
                    errMessage:'店铺简介必须20字以上',
                    test:(value) => {
                        return value.length > 20;
                    }
                }
            ]
        }
    };
    errWoring =(text) => {
        Modal.warning({
            title:text
        });
    }

    /**
     * 可以复用的代码
     */
        //针对checkbox的取消选择
    getIndex = (val,array) => {
        for(let i=0;i<array.length;i++){
            if(array[i] == val){
                return this.removeItem(i,array);
            }
        }
    }
    removeItem = (c,array) =>{
        for(let i=0;i<array.length;i++){
            if(c==i){
                array.splice(c,1);
                return array;
            }
        }

    }
    handleChange =(name,event) => {
        var newState = {};
        // console.log(name,event.target);
        // event.target.checked?newState[name] = event.target.checked:newState[name] = event.target.value;
        if(name == 'industry'){
            if(event.target.checked){
                checkbox.push(event.target.value);
                newState[name] = checkbox;
            }else{
                let newArray=[];
                console.log(this.getIndex(event.target.value,checkbox));
                for(let i=0;i<checkbox.length;i++){
                    newArray.push(checkbox[i]);
                }
                newState[name] = newArray;
            }
        }else{
            newState[name] = event.target.value;
        }

        // console.log(newState);
        this.setState(newState);
        for(let key in this.query){
            if(key == name){
                this.query[key].value += event.target.value;
            }
        }
    };
    valiForm =() => {
        for(let key in this.query){
            // console.log(this.query[key]);
            let item = this.query[key];
            let valiItem = item.validata;
            if(valiItem !== undefined){
                for(let k in valiItem){
                    let valis = valiItem[k];
                    if(!valis.test(item.value)){
                        this.errWoring(valis.errMessage);
                        return false;
                    }
                }
            }
        }
        return true;
    }
    submitFun =() => {
        //提交前先前端验证
        // this.valiForm();
        // alert(this.valiForm())
        if(this.valiForm() !== true){
            return false;
        }
        console.log(this.state)
        // alert('提交了');
        // console.log(this.username.value);
    };
    render(){
        return (
            <div>
                {/* <form action=""> */}
                <div>
                    <label htmlFor="username">用户名：</label>
                    <input type="text" id="username" name="username" value={this.state.username} onChange={this.handleChange.bind(this,'username')}/>
                </div>
                <div>
                    <label htmlFor="password">密码：</label>
                    <input type="password" id="password" name="password" value={this.state.password} onChange={this.handleChange.bind(this,'password')}/>
                </div>
                <div>
                    <label htmlFor="code_type">用户类型：</label>
                    <input type="radio" name="radios" value='企业' onChange={this.handleChange.bind(this,'usertype')}/>企业
                    <input type="radio" name="radios" value='个人' onChange={this.handleChange.bind(this,'userpyte')}/>个人
                </div>
                <div>
                    <label htmlFor="senior">经营范围：</label>
                    <input type="checkbox" name="checkbox1" value="物料制作" onChange={this.handleChange.bind(this,'industry')}/>物料制作
                    <input type="checkbox" name="checkbox2" value="物品租赁" onChange={this.handleChange.bind(this,'industry')}/>物品租赁
                    <input type="checkbox" name="checkbox3" value="平面设计" onChange={this.handleChange.bind(this,'industry')}/>平面设计
                    <input type="checkbox" name="checkbox4" value="展台设计搭建" onChange={this.handleChange.bind(this,'industry')}/>展台设计搭建
                </div>
                <div>
                    <label htmlFor="message">店铺简介：</label>
                    <textarea name="" id="message" cols="100" rows="10" value={this.state.message} onChange={this.handleChange.bind(this,'message')}></textarea>
                </div>
                <p><button type="primary" onClick={this.submitFun}>提交</button></p>
                {/* </form>  */}
            </div>
        );
    }
};
export default AddUser;
